<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="我的订单">
	</u-navbar>
	<view class="white-bg" style="padding: 10px 15px 15px 15px;">
		<Tabs :list="data.tabs" @tabChange="tabChange" :active="data.selectedTabIndex"></Tabs>
	</view>
	<empty :config="{text:'您还没有相关的订单'}" v-if="data.list.length==0&&data.resultTotal==0" />
	<view v-else class="padding-30rpx" style="background-color: #F7F7F7;padding-top: 0;">
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class=" padding-30rpx white-bg scroll-item" style="border-radius: 8px;" v-for="item,index in  data['list']"
				>
				<view class="flex-jc-s-b" style="font-size: 14px;">
					<text style="font-weight: bold;color: #333333;" :user-select="true">订单编号：{{item.num||''}}</text>
					<view class="">
						<text style="color: #409EFF;"
							v-if="item.statusCode=='paying'&&item.refundStatusCode=='non'">待付款</text>
						<text style="color: #409EFF;"
							v-if="item.statusCode=='payAuditing'&&item.refundStatusCode=='non'">
							待审核
						</text>
						<text style="color: #409EFF;"
							v-if="item.statusCode=='paid'&&(item.refundStatusCode=='non' || item.refundStatusCode=='cancel')">
							已付款
						</text>
						<!--  -->
						<text style="color: #EB5940;" v-if="item.refundStatusCode=='refunding'">退款中</text>
						<text style="color: #333333;" v-if="item.refundStatusCode=='success'">退款成功</text>
						<text style="color: #EB5940;" v-if="item.refundStatusCode=='failed'">退款失败 </text>
						<text style="color: #333333;" v-if="item.statusCode=='cancel'">已取消</text>
					</view>
				</view>
				<view style="margin: 15px 0;"><text style="font-size: 14px;"> 创建时间：</text>{{item.createTime||''}}</view>
				<view class="flex-jc-s-b" @click="goDetail(item)">
					<view><text style="font-size: 14px;">学员数量：</text>{{item.itemAmount||0}}</view>
					<view class="flex-al-center" style="color:#999999 "
						>
						<text class="font-small-x" style="margin-right: 5px;">查看详情</text>
						<u-icon name="arrow-right" color="#999999 " size="20"></u-icon>
					</view>
				</view>
				<view class="order-pay-content">
					<text style="font-size: 15px;color: #333333;">付款金额</text>
					<text style="font-size: 12px;margin-left: 3px;">￥</text>
					<text class="text-price-value">{{item.price}}</text>
				</view>
<!--				<view class="order-pay-content" style="color: #333333;margin-top: 0;"-->
<!--					v-if="item.refundStatusCode=='refunding'">-->
<!--					<text style="color: #333333;font-size: 15px;">退款金额</text>-->
<!--					<text style="font-size: 12px;margin-left: 3px;">￥</text>-->
<!--					<text class="text-price-value">{{(item.payPrice||0)-(item.finalPrice||0)}}</text>-->
<!--				</view>-->
				<view class="order-pay-content" style="color: #333333;margin-top: 0;"
					v-if="item.refundStatusCode=='success'">
					<text style="color: #333333;font-size: 15px;">已退款</text>
					<text style="font-size: 12px;margin-left: 3px;">￥</text>
					<text class="text-price-value">{{(item.payPrice||0)-(item.finalPrice||0)}}</text>
				</view>
				<!-- <view class="" v-if="item.refundStatusCode=='success'"
					style="width: 100%;padding: 10px;;background: #F7F7F7;border-radius: 4px;color: #666666;font-size: 12px;margin-bottom: 15px;">
					{{item.refundDescription||''}}
				</view> -->
				<view class="order-handle-button" style="">
					<u-button shape='circle' :plain="true"
						v-if="(item.statusCode=='paying' || item.statusCode=='payAuditing')&&item.refundStatusCode=='non'"
						:customStyle="{width: '75px',height: '35px','margin':'0 0 0 10px',padding:'0','border':'1px solid  #CECECE'}"
						type="" @click="openModal(item.id,'close')">取消订单
					</u-button>
					<u-button shape='circle' :plain="true"
						v-if="item.statusCode=='paying'&&item.refundStatusCode=='non'"
						:customStyle="{width: '75px',height: '35px','margin':'0 0 0 10px',padding:'0'}" type="primary"
						@click="goPay(item.id)" text="去付款">
					</u-button>
					<u-button shape='circle' :plain="true"
						v-if="item.statusCode== 'paid'&&item.refundStatusCode=='non'&&item.in24Hours==1"
						:customStyle="{width: '75px',height: '35px','margin':'0 0 0 10px',padding:'0','border':'1px solid  #CECECE'}"
						type="" @click="$routePage({url:'pages/order/refund/refund',params:{id:item.id, orderNum: item.num, payMethodCode: item.payMethodCode}})">申请退款
					</u-button>
					<u-button shape='circle' :plain="true"
                    v-if="item.statusCode === 'paid' && item.invoiceFlag !== 1
                    && item.refundStatusCode!=='refunding' && item.finalPrice !== 0"
						:customStyle="{width: '75px',height: '35px','margin':'0 0 0 10px',padding:'0','border':'1px solid  #CECECE'}"
						type="" @click="$routePage({url:'pages/order/invoicing/query',params:{id:item.id}})">申请开票
					</u-button>
					<u-button shape='circle' :plain="true" v-if="item.refundStatusCode=='refunding'"
						:customStyle="{width: '75px',height: '35px','margin':'0 0 0 10px',padding:'0'}" type="primary"
						@click="openModal(item.id,'cancel')" text="撤销退款">
					</u-button>
				</view>
			</view>
		</scroll-view>
	</view>
	<u-modal :show="data.showConfirmDialog" title="提示" showCancelButton="true" @cancel="data.showConfirmDialog=false"
		:content="data.content" @confirm="dialogConfirmHandle"></u-modal>
</template>

<script setup>
	import Tabs from '@/pages/components/tabs.vue'
	import { onMounted, reactive } from "vue";
	import { pagingApi, cancelApi, cancelOrderApi } from './const.js'
	import empty from '@/pages/components/empty.vue'
	import { onLoad, onShow } from "@dcloudio/uni-app";
  import pageRoute from '@/utils/pageRoute'
	const data = reactive({
		showConfirmDialog: false,
		orderId: '',
		modalType: '',
		content: '是否取消订单？',
		tabs: [{
				name: '全部',
				type: 'all',
				value: null,
				statusCode: null,
				refundStatusCode: null
			},
			{
				name: '待付款',
				type: 'paying',
				value: 'paying',
				statusCode: 'paying',
				refundStatusCode: null
			},
			{
				name: '已付款',
				type: 'paid',
				value: 'paid',
				statusCode: 'paid',
				refundStatusCode: null
			},
			{
				name: '退款中',
				type: 'refunding',
				value: 'refunding',
				statusCode: null,
				refundStatusCode: 'refunding'
			},
			{
				name: '退款成功',
				type: 'refunded',
				value: 'success',
				statusCode: null,
				refundStatusCode: 'success'
			},
		],
		list: [],
		request: {
			"studnetName": "",
			"payDateStart": "",
			"payDateEnd": "",
			"pageDomain": {
				"pageNum": 1,
				"pageSize": "3",
				"orderByColumn": "",
				"isAsc": "",
				"reasonable": ""
			}
		},
		resultTotal: 999999,
		selectedTabIndex: 0
	})
	// onMounted(() => {
	// 	// paging()
	// })

	onLoad((options) => {
		let type = options.type || 'all'
		let selectedItem = null
		let selectedIndex = 0
		data.tabs.forEach((item, index) => {
			if (item.type == type) {
				selectedItem = item
				selectedIndex = index
			}
		})

		tabChange(selectedIndex, selectedItem)
	})

	const paging = () => {
		pagingApi(data.request).then((res) => {
			data.list.push(...res.rows)
			data.resultTotal = res.total
		}).catch((err) => {
			data.resultTotal = 0
		})
	}
	const openModal = (id, type) => {
		data.orderId = id
		data.modalType = type
		if (data.modalType == 'cancel') { data.content = "是否撤销退款？" }
		if (data.modalType == 'close') { data.content = "是否取消订单？" }
		data.showConfirmDialog = true
	}
	const dialogConfirmHandle = () => {
		if (data.modalType == 'cancel') { cancelHandle() }
		if (data.modalType == 'close') {
			cancelOrderHandle()
		}
		data.showConfirmDialog = true
	}
	const cancelHandle = () => {
		cancelApi({ orderId: data.orderId }).then((res) => {
			data.showConfirmDialog = false
			uni.showToast({ title: '撤销退款成功', duration: 1200, icon: "none" });
			data.list = []
			paging()
		})
	}
	const cancelOrderHandle = () => {
		cancelOrderApi({ id: data.orderId }).then((res) => {
			data.showConfirmDialog = false
			uni.showToast({ title: '取消订单成功', duration: 1200, icon: "none" });
			data.list = []
			paging()
		})
	}
	const tabChange = (index, item) => {
		data.request.statusCode = item.statusCode
		data.request.refundStatusCode = item.refundStatusCode;
		data.list = []
		data.request.pageDomain.pageNum = 1
		data.resultTotal = 99999
		data.selectedTabIndex = index
		paging()
	}

	function lower(e) {
		if ((data.resultTotal <= data.list.length) || data.resultTotal == 0) { return }
		data.request.pageDomain.pageNum++
		paging()
	}

	function goPay(id) {
		pageRoute.route('pages/order/buy/pay', {id: id})
	}

	function goDetail(item) {
		if (item.statusCode == 'paying') {
			goPay(item.id)
			return
		}
		pageRoute.route('pages/order/detail', {id:item.id})
	}

</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
	.order-pay-content {
		font-size: 15px;
		display: flex;
		justify-content: flex-end;
		margin: 15px 0;
		color: #EB5940;
		align-items: flex-end;
	}

	.order-handle-button {
		display: flex;
		justify-content: flex-end;
	}

	.scroll-item {
		margin-top: 15px;
		display: flex;
		flex-direction: column;
		color: #666666;
		font-size: 13px;
	}

	.scroll-Y {
		height: calc(100vh - 74px - 90px);
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		border: 1px solid red;
		font-size: 36rpx;
	}

	.text-price-value {
		font-size: 17px;
		font-weight: bold;
		margin-bottom:-2px;
	}
</style>
